<template>
  <el-container>
    <el-aside width="0px">
      <!-- 侧边栏抽屉，包含菜单 -->
      <el-drawer v-model="drawer2" size="220px" style="padding: 0px;" direction="ltr" :with-header="false">
        <div class="sidebar">
          <!-- 平台Logo和标题 -->
          <div class="logo-title">
            <h3>智慧会议管理平台</h3>
          </div>

          <!-- 菜单区域，支持多级菜单 -->
          <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" background-color="#001529"
            text-color="#ffffffb3" active-text-color="#1890ff" @select="handleSelect" :unique-opened="true">
            <!-- 遍历所有菜单项，支持子菜单 -->
            <template v-for="item in allMenuItems" :key="item.id">
              <!-- 有子菜单时渲染 el-sub-menu -->
              <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.id">
                <template #title>
                  <el-icon>
                    <component :is="getIconComponent(item.icon)" />
                  </el-icon>
                  <span>{{ item.name }}</span>
                </template>
                <!-- 渲染子菜单项 -->
                <el-menu-item v-for="child in item.children" :key="child.id" :index="child.id">
                  <el-icon>
                    <component :is="getIconComponent(child.icon)" />
                  </el-icon>
                  <span>{{ child.name }}</span>
                </el-menu-item>
              </el-sub-menu>

              <!-- 无子菜单时渲染普通菜单项 -->
              <el-menu-item v-else :index="item.id">
                <el-icon>
                  <component :is="getIconComponent(item.icon)" />                  
                </el-icon>
                <span>{{ item.name }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </div>
      </el-drawer>
    </el-aside>
    <el-container>
      <el-header class="header">

        <!-- 抽屉按钮，点击后打开侧边栏抽屉 -->
        <el-button type="primary" style="margin-left: 16px" @click="drawer2 = true">
          <el-icon>
            <Operation />
          </el-icon>
        </el-button>

        <el-button type="primary" style="margin-left: 16px" @click="logout">
          退出
        </el-button>
        
      </el-header>
      <el-main>
        <RouterView />
        
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
// 引入Vue响应式API
import { ref, computed } from 'vue';
import type { DrawerProps } from 'element-plus';
// 引入Element Plus图标
import {
  FolderOpened,
  Briefcase,
  Operation,
  HomeFilled, // 首页
  OfficeBuilding, // 会议室管理
  Calendar, // 会议预约
  Finished, // 会议审批
  DataAnalysis, // 统计分析
  Setting, // 系统管理
  User, // 用户管理
  Lock, // 角色管理
  Menu as IconMenu, // 默认子菜单图标
} from '@element-plus/icons-vue';
import { RouterView } from 'vue-router';
import router from '@/router';
import { useCounterStore } from '@/stores/counter';
// 控制抽屉显示/隐藏
const drawer2 = ref(false);
// 当前激活菜单项ID
const activeMenu = ref('home');
// 菜单项类型声明
interface MenuItem {
  id: string;
  name: string;
  icon: any; // 图标组件
  path: string;
  children?: MenuItem[]; // 可选子菜单
}

// 主菜单项数据
const menuItems = ref<MenuItem[]>([
  {
    id: 'Frontpage', name: '首页', icon: HomeFilled, path: '/Frontpage'
  },
  {
    id: 'ShowMeeting', name: '会议室管理', icon: OfficeBuilding, path: '/ShowMeeting'
  },
  { id: 'MeetingAppointment', name: '会议预约', icon: Calendar, path: '/MeetingAppointment' },
  { id: 'approval', name: '会议审批', icon: Finished, path: '/approval' },
  { id: 'analysis', name: '统计分析', icon: DataAnalysis, path: '/analysis' },
]);

// 系统管理菜单项，含子菜单
const systemMenu = ref<MenuItem>({
  id: 'system',
  name: '系统管理',
  icon: Setting,
  path: '/system',
  children: [
    { id: 'GetUserView', name: '用户管理', icon: User, path: 'GetUserView' },
    { id: 'role-manage', name: '角色权限', icon: Lock, path: '/system/roles' },
    { id: 'role-dept', name: '部门管理', icon: Briefcase, path: '/system/dept' },
    { id: 'NlogIn', name: '操作日志', icon: FolderOpened, path: '/NlogIn' },
  ],
});
// 合并所有菜单项，便于统一遍历
const allMenuItems = computed(() => [...menuItems.value, systemMenu.value]);
const handleSelect = (index: string, indexPath: string[]) => {
  activeMenu.value = index;

  function findAndPush(items: any, index: any): boolean {
    for (const item of items) {
      if (item.id === index) {
        router.push(item.path);
        return true;
      }
      if (item.children && findAndPush(item.children, index)) {
        return true;
      }
    }
    return false;
  }

  // 用 allMenuItems 而不是 menuItems
  findAndPush(allMenuItems.value, index);
};
// 获取图标组件（Element Plus图标直接返回，其他情况返回默认图标）
const getIconComponent = (icon: any) => {
  return icon;
};


const route = useCounterStore();//pinia
//console.log(route.userInfo)
//退出
const logout = () => {
  route.userInfo = {
    userId: 0,
    accountNumber: "",
    userTelephone: "",
    memberLevel: "",
    orderRecords: 0,
    availablePoints: 0,
    userTittle: "",
    idNumber: ""
  }
  router.push({ path: '/' })
}
</script>

<style scoped>
/* 侧边栏整体样式 */
.sidebar {
  width: 220px;
  height: 100%;
  background-color: #001529;
  display: flex;
  flex-direction: column;
  font-family: 'Arial', sans-serif;
  overflow: hidden;
  /* 禁止滚动条显示 */
  padding: 0%;
}

/* 顶部Logo和标题样式 */
.logo-title {
  padding: 20px 15px;
  text-align: center;
  font-size: 1.1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  height: 60px;
  box-sizing: border-box;
}

.logo-title h3 {
  margin: 0;
  font-weight: 600;
}

/* Element Menu 样式调整 */
.el-menu-vertical-demo {
  border-right: none;
  flex-grow: 1;
  overflow: hidden;
  /* 禁止菜单滚动条显示 */
}

/* 调整 el-menu-item 和 el-sub-menu 的样式 */
.el-menu-item,
.el-sub-menu__title {
  height: 50px;
  line-height: 50px;
}

.el-menu-item.is-active {
  background-color: #003366 !important;
}

.el-menu .el-menu-item,
.el-menu .el-sub-menu .el-menu-item {
  background-color: #000c17 !important;
}

.el-menu .el-menu-item:hover,
.el-menu .el-sub-menu__title:hover {
  background-color: #003366 !important;
}

.el-icon {
  margin-right: 10px;
  vertical-align: middle;
  font-size: 18px;
}

/* 去除抽屉body默认内边距 */
:deep(.el-drawer__body) {
  padding: 0 !important;
}
</style>
<style>
.header {
  background-color: #F5F7FA;
  color: #fff;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>